<template lang="">
    <div>
        <myheader/>
        <h2>用户中心</h2>
        {{user.username}}<br>
        手机号{{user.mobile | mobilefilter}}<br>
        头像<van-image
        width="100"
        height="100"
        :src="url"
      /><br>
        上传头像：<van-uploader :after-read="upload" />

        多文件上传控件:
        <van-uploader v-model="fileList" multiple :max-count="3"  :after-read="uploadmul"/>
    </div>
</template>
<script>
import myheader from '@/components/myheader'
export default {
    data(){
        return{
            user:{},
            userid:localStorage.getItem('userid'),
            url:'',
            fileList:[]
        }
    },
    //定义过滤器
    filters:{
        //手机号隐藏中间6位
        mobilefilter(value){
            if(value){
                return value.slice(0,3)+"******"+value.slice(-2,)
            }
            return value
        },
    },
    methods: {
        //获取用户
        getUserinfo(){
            this.$axios.get('users/getuserinfo?userid='+this.userid).then(res=>{
                this.user = res.data.user
                this.url = this.up_upload_dir+this.userid+"/"+res.data.user.avater
            })
        },
        //单文件上传
        upload(file){
            // 此时可以自行将文件上传至服务器
            let data = new FormData()
            data.append('file',file.file)
            data.append('userid',this.userid)
            this.$axios.post('users/upload',data).then(res=>{
                //更新展示图片的地址
                this.url = this.upload_dir+this.userid+"/"+res.data.filename
            })
        },
        //多文件上传控件
        uploadmul(){
            //遍历fileList,this.fileList.length获取长度
            for(var i=0;i<this.fileList.length;i++){
                var file = this.fileList[i]
                this.upload(file)
            }
        }
    },
    mounted() {
        this.getUserinfo()
    },
    components:{
        'myheader':myheader
    }
}
</script>
<style lang="">
    
</style>